<template>
  <view>
    <view class="mt-4 bg-cell bdrs-8 ov-h d-flex">
      <view
        class="ta-c flex-1 py-3"
        hover-class="btn-1"
        v-for="(it, i) in ordMenus"
        :key="i"
        @click="$navTo('order', { idx: i })"
      >
        <view class="d-center" style="height: 28px">
          <u-icon :name="it.icon" :size="it.size || 28"></u-icon>
        </view>
        <view class="fz-14 mt-1">{{ it.label }}</view>
      </view>
    </view>
    <view class="mt-4" v-for="(menus, i) in menuList" :key="i">
      <q-list :items="menus" @item="onMenu" />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["userInfo"]),
    menuList() {
      let menuList = [
        [
          {
            title: "地址管理",
            icon: "map",
            link: "user/addr-list",
          },
        ],
        [
          {
            title: "代金券",
            icon: "coupon",
            link: "user/coupon-list",
          },
          {
            title: "邀请好友",
            icon: "man-add",
          },
        ],
      ];
      menuList.push([
        {
          title: "联系客服",
          openType: "contact",
          icon: "kefu-ermai",
          noLogin: true,
        },
      ]);
      return menuList;
    },
    ordMenus() {
      return [
        {
          icon: "order",
          label: "全部订单",
        },
        {
          icon: "clock",
          label: "待支付",
          status: 0,
          size: 24,
        },
        {
          icon: "car",
          label: "进行中",
          status: 1,
        },
        {
          icon: "chat",
          label: "已完成",
          status: 1,
        },
      ];
    },
  },
  methods: {
    onMenu(it) {
      const { link, noLogin } = it;
      if (!this.userInfo.id && !noLogin) {
        this.$navTo("mine/login", {
          to: link,
        });
        return;
      }
      if (link) {
        this.$navTo(link);
      }
    },
  },
};
</script>
